<script setup>
import { ref } from 'vue'

defineProps({
  msg: String
})

const count = ref(0)
</script>

<template>
  <div class="list">
    <div class="item">
      <a href="http://192.168.0.191">
        <div class="title">
          MES系统
        </div>
        <div class="content" title="MES系统（Manufacturing Execution System），即制造企业生产过程执行系统，是一套面向制造企业车间执行层的生产信息化管理系统。">
          MES系统（Manufacturing Execution System），即制造企业生产过程执行系统，是一套面向制造企业车间执行层的生产信息化管理系统。
        </div>
      </a>
    </div>
    <div class="item">
      <a href="http://192.168.0.192">
        <div class="title">
          WMS系统
        </div>
        <div class="content" title="WMS(Warehouse Management System),即仓储管理系统，是对上游订单管理系统或ERP系统仓储功能的扩展、延伸与优化。实际应用中，它为仓储与配送中心提供更快、更准确、更精细的管理运营，提供系统层面的支持。">
          WMS(Warehouse Management System),即仓储管理系统，是对上游订单管理系统或ERP系统仓储功能的扩展、延伸与优化。实际应用中，它为仓储与配送中心提供更快、更准确、更精细的管理运营，提供系统层面的支持。
        </div>
      </a>
    </div>
    <div class="item">
      <a href="http://192.168.0.194/">
        <div class="title">
          CRM系统
        </div>
        <div class="content" title="CRM主要模块包括:客户管理、商城管理、费率管理、零售订单管理，采购订单管理、商机需求管理、营销管理、客户服务、知识库管理、图片管理、系统配置、APP管理等">
          CRM主要模块包括:客户管理、商城管理、费率管理、零售订单管理，采购订单管理、商机需求管理、营销管理、客户服务、知识库管理、图片管理、系统配置、APP管理等
        </div>
      </a>
    </div>
    <div class="item">
      <a href="http://112.12.0.218:25609/k3cloud/">
        <div class="title">
          ERP系统
        </div>
        <div class="content" title="ERP(Enterprise Resource Planning)即企业资源计划，是指建立在信息技术基础上，以系统化的管理思想，为企业管理者提供决策运行手段的管理平台，其中包括生产计划、财务、销售、采购、库存等环节管理。">
          ERP(Enterprise Resource Planning)即企业资源计划，是指建立在信息技术基础上，以系统化的管理思想，为企业管理者提供决策运行手段的管理平台，其中包括生产计划、财务、销售、采购、库存等环节管理。
        </div>
      </a>
    </div>
  </div>
</template>

<style scoped>
.list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 0.5%;
  justify-items: center;
  width: 100%;
  margin: 0 auto;
  color: #fff;
}
.item{
  background: url("./../assets/item-bg.png") no-repeat;
  background-position: top center;
  height: 285px;
  max-width: 412px;
  background-size: contain;
}
.list .title{
  font-size: 30px;
  padding-top: 23%;
  padding-bottom: 4%;
}
.list .content{
  font-size: 18px;
  padding: 0 20px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;  /*要显示的行数*/
  -webkit-box-orient: vertical;
  text-align: left;
}
.list a{
  color: #fff;
  text-decoration: none;
}
</style>
